<template>
   <div class="global" @click="changeClick">
     <div class="none">X</div>
     <div class="globalImg">
       <swiper :options="swiperOption" >
         <!-- slides -->
         <swiper-slide v-for="(item,index) of imgs " :key="index">
           <img :src="'http://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/'+skinId+'/'+skinId+'-mobileskin-'+(index+1)+'.jpg'" >
           <div class="itemname">{{item}}</div>
         </swiper-slide>
         <div class="swiper-pagination" slot="pagination"></div>
       </swiper>
     </div>
   </div>
</template>
<script>
export default {
  name: 'CommentGlobal',

  props: {
    skinId: '',
    imgs: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      swiperOption: {
        pagination: ' .swiper-pagination',
        paginationType : 'fraction',
        observer:true,
        observeParents:true,
      }
    }
  },
  methods: {
    changeClick () {
      this.$emit('close')

    }
  }
}
</script>
<style scoped>
  .swiper-container {
      overflow: inherit;
  }
 .global {
   position:fixed;
   width: 100%;
   height: 100%;
   top:0;
   left: 0;
   background-color: black;
   z-index: 99;
   overflow: hidden;
 }
  .global .globalImg {
    width: 100%;
    position: absolute;
    height: 240px;
    top:10%;
    /*margin-top: -129px;*/
    align-items: center;
  }
  .globalImg img {
    width: 100%;
  }
 .swiper-pagination {
   color: white;
   bottom: -25px;
 }
  .none {
    position: absolute;
    top:10px;
    right: 10px;
    width: 35px;
    height: 35px;
    background-color: rgba(0,0,0,0.6);
    color:white;
    text-align: center;
    border-radius: 35px;
    line-height: 35px;
  }
  .itemname {
    width:100%;
    height:20px;
    color:yellow;
    line-height:20px;
    text-align:center;
  }
</style>
